<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
    <style type="text/css">
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <!-- <div v-html='message'></div>
    <input type="text" v-model="message"> -->
    <input type="checkbox" v-model="class1">
    <p v-bind:class="{'red':class1}">水电费水电费水电费水电费是的是水电费水电费水电费是的是的</p>
</div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#box',
    data:{
      class1:false
    }
  })
</script>
</html>